﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>主题设置</title>
<style>
    body { margin: 0; font-size: 12px; }
    #themes { height: 330px; overflow: auto; }
    #themes a { float: left; width: 130px; margin: 10px 0 0 10px; border: 1px solid silver; overflow: hidden; text-decoration: none; }
    #themes a.selected { background: url(pngs/theme-selected.png) right bottom no-repeat; border-color: skyblue; }
    img { display: block; width: 120px; height: 90px; margin: 5px auto; }
    span { display: block; margin: 5px; }
    #settings { margin: 10px 10px auto; }
</style>
<script src="jquery-1.8.3.js"></script>
</head>
<body>
    <div id="themes">
        <a id="theme_1" draggable="false" href="javascript://[1,'jpgs/bg.jpg','middle']"><img draggable="false" src="jpgs/bg_s.jpg" alt="" /><span>默认主题</span></a>
        <a id="theme_2" draggable="false" href="javascript://[2,'jpgs/bg2.jpg','stretch']"><img draggable="false" src="jpgs/bg2_s.jpg" alt="" /><span>机械迷城</span></a>
    </div>
    <div id="settings">
        背景位置：<select>
            <option value="stretch">拉伸</option>
            <option value="middle">居中</option>
            <option value="tile">平铺</option>
        </select>
    </div>
</body>
</html>
<script>
    var themes = $('#themes a'), position = $('select');

    themes.click(function () {
        themes.removeClass('selected');
        this.classList.add('selected');
        var args = eval(this.href.substr(13)),
            theme = { themeId: parseInt(args[0]), bgImage: args[1], position: args[2] };
        position.val(theme.position);
        parentWindow.api.setTheme(theme);
    });
    position.change(function () {
        var theme = parentWindow.api.getTheme();
        theme.position = this.value;
        parentWindow.api.setTheme(theme);
    })
    window.onload = function () {
        setTimeout(function () {
            var theme = parentWindow.api.getTheme();
            $('#theme_' + theme.themeId).addClass('selected');
            position.val(theme.position);
        });
    };
</script>
